<template>
    <div>
        <!--表单-->
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="姓名">
                <el-input v-model="formInline.user" placeholder="审批人"></el-input>
            </el-form-item>
            <el-form-item label="省份">
                <el-input v-model="formInline.user" placeholder="审批人"></el-input>
            </el-form-item>
            <el-form-item label="地市">
                <el-input v-model="formInline.user" placeholder="审批人"></el-input>
            </el-form-item>
            <el-form-item label="审核类型">
                <el-select v-model="formInline.region" placeholder="审核类型">
                    <el-option label="未审核" value="0"></el-option>
                    <el-option label="审核通过" value="1"></el-option>
                    <el-option label="审核不通过" value="-1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="审核时间">
                <el-date-picker
                    v-model="auditTime"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>
        <!--文件上传-->
        <el-button type="primary" @click="popLeadIn">上传</el-button>

        <!--表格-->
        <el-table
            :data="tableData"
            border
            style="width: 100%">
            <el-table-column
                fixed
                prop="date"
                label="日期"
                width="150">
            </el-table-column>
            <el-table-column
                prop="name"
                label="姓名"
                width="120">
            </el-table-column>
            <el-table-column
                prop="province"
                label="省份"
                width="120">
            </el-table-column>
            <el-table-column
                prop="city"
                label="市区"
                width="120">
            </el-table-column>
            <el-table-column
                prop="address"
                label="地址"
                width="100"
                fit="false">
            </el-table-column>
            <el-table-column
                prop="address"
                label="地址"
                width="300">
            </el-table-column>
            <el-table-column
                prop="address"
                label="地址"
                width="300">
            </el-table-column>
            <el-table-column
                prop="zip"
                label="邮编"
                width="120">
            </el-table-column>
            <el-table-column
                fixed="right"
                label="操作"
                width="180"
            >
                <template slot-scope="scope">
                    <el-button @click="editClick(scope.row)" type="primary" size="mini">编辑</el-button>
                    <el-button type="danger" size="mini" @click="delClick(scope.row)">删除</el-button>
                    <!--<el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>-->
                </template>
            </el-table-column>

        </el-table>

        <!--翻页-->
        <div v-if="totalPage > 1" class="c-search-condition c-clearfix">
            <pagination :total-page="totalPage" @change-page="getData" ref="pagination"></pagination>
        </div>
        <!--嵌套表单-->
        <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="活动名称" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="活动名称" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="活动名称" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="活动名称" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="活动区域" :label-width="formLabelWidth">
                    <el-select v-model="form.region" placeholder="请选择活动区域">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>

        <!--导入弹出框-->
        <el-dialog title="导入文件" :visible.sync="dialogVisible3" width="500px">
            <div class="express-ctr-item">
                <label class="express-ctr-label">userId：</label>
                <el-input placeholder="请输入userId" size="small" v-model="userId"></el-input>
            </div>
            <div class="express-ctr-item">
                <label class="express-ctr-label">导入文件：</label>
                <button type="button" class="c-btn sm" @click="$refs.file.click()">{{ file ? '重新选择' : '选择文件' }}</button>
                {{ file ? file.name : '' }}
                <input type="file" ref="file" style="display:none;" @change="file = $event.target.files[0]"/>
            </div>
            <span slot="footer">
                <button type="button" class="c-btn sm transparent"
                        @click="dialogVisible3 = false;file = null">取消</button>
                <button type="button" class="c-btn sm" @click="leadInto">确定</button>
            </span>
        </el-dialog>
        <loading v-if="loading"></loading>
    </div>
</template>

<script>
    import axios from 'axios';
    import pagination from '@/component/pagination';
    // import loading from '@/component/loading.vue';
    import {mytips} from '@/module/tools';
    import {Loading} from 'element-ui';

    export default {
        name: 'realNameList',
        components: {pagination, Loading},
        data() {
            return {
                loading: false,
                loadInstance: null,
                totalPage: 10,
                users: ['kaka', 'messi'],
                dialogFormVisible: false,
                formLabelWidth: '120px',
                tableData: [{
                    date: '2016-05-03',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                    zip: 200333
                }, {
                    date: '2016-05-02',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                    zip: 200333
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                    zip: 200333
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                    zip: 200333
                }],
                formInline: {
                    user: '',
                    region: ''
                },
                auditTime: '',
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                fileList: [],
                // 导入
                dialogVisible3: false,
                userId: '',
                file: null,
                channel_name2: null,
            };
        },
        methods: {
            /*翻页跳转处理，传入页数*/
            getData: function (page) {
                console.log("======页数==" + page);
            },
            editClick(row) {
                console.log(row);
                console.log('==编辑操作==时间' + row.date);
                this.dialogFormVisible = true;

            },
            delClick(row) {
                console.log(row);
                console.log('==删除操作==时间' + row.date);
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    setTimeout('console.log("模拟函数调用")', 2000);
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    // window.location.reload();
                }).catch(() => {
                    /*  this.$message({
                          type: 'info',
                          message: '已取消删除'
                      });*/
                    console.log("取消")
                });
            },
            onSubmit() {
                //时间转换的问题
                let beginTime = this.$data.auditTime[0];
                let endTime = this.$data.auditTime[1];
                console.log(beginTime);
                console.log(endTime);
                console.log(this);
                console.log(this.$data);
                console.log('submit!');
            },
            /*上传的相关方法*/
            popLeadIn() {
                this.dialogVisible3 = true;
            },

            // 导入
            leadInto() {
                if (!this.userId) {
                    mytips('请输入userId');
                    return false;
                }
                if (!this.file) {
                    mytips('请上传文件');
                    return false;
                }
                let formData = new FormData();
                formData.append('userId', this.userId);
                formData.append('file', this.file);
                this.loadInstance = Loading.service({
                    text: '加载中...',
                    background: 'rgba(0,0,0,0.1)',
                });
                axios.post(
                    API_PATH + '/uploadFiles',
                    formData,
                    {headers: {'Content-Type': 'multipart/form-data'}},
                ).then(
                    res => {
                        this.loadInstance.close();
                        if (res.data.code == 0) {
                            this.dialogVisible3 = true;
                            this.file = null;
                        }
                    },
                    xhr => this.loadInstance.close()
                )
                ;
            },

        },
        mounted() {
            console.log("mount=====")
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .express-ctr-item {
        margin-top: 12px;
    }

    .express-ctr-item .express-ctr-label {
        display: inline-block;
        width: 100px;
        text-align: right;
        line-height: 32px;
    }

</style>

